import React, { Component } from 'react'
import { Card, Button, Checkbox, Form, Input, message } from 'antd'
import styles from './index.module.scss'
import logo from 'assets/logo.svg'
import { login, getCodeImg } from 'api/user.js'
import { setToken } from 'utils/storage'

export default class Login extends Component {
  state = {
    // 提交按钮的加载状态
    loading: false
  }
  formRef = React.createRef()
  componentDidMount() {
    this.getCode()
  }

  getCode = async () => {
    try {
      const res = await getCodeImg()
      this.code = 10
      this.uuid = res.uuid
    } catch (error) {
      message.warning('获取验证码失败')
    }
  }
  // 校验成功
  onfinish = async (values) => {
    // console.log('this.props is', this.props)
    this.setState({
      loading: true
    })
    try {
      const res = await login({
        ...values,
        code: this.code,
        uuid: this.uuid,
        loginPlatform: 2 // 前台项目
      })
      // // console.log(res)
      // localStorage.setItem('token', res.data.token)
      setToken(res.token)
      const { state } = this.props.location
      message.success('登录成功', 1, () => {
        if (state) {
          this.props.history.push(state.from)
        } else {
          this.props.history.push('/home')
        }
      })
    } catch (err) {
      message.warning(err.response.data.message, 1, () => {
        this.setState({
          loading: false
        })
      })
    }
  }
  render() {
    return (
      <div className={styles.login}>
        <Card className="login-container">
          <img src={logo} alt="" className="login-logo" />
          <h3 className="subtitle" style={{ textAlign: 'center' }}>
            工作生活小帮手
          </h3>
          {/* 表单 */}
          <Form
            ref={this.formRef}
            size="large"
            // 校验成功
            onFinish={this.onfinish}
            initialValues={{
              userAccount: 'ssh',
              pwd: '123',
              agree: true
            }}>
            <Form.Item
              name="userAccount"
              rules={[
                {
                  required: true,
                  message: '请输入账号'
                }
              ]}>
              <Input placeholder="请输入账号" />
            </Form.Item>

            <Form.Item
              name="pwd"
              rules={[
                {
                  required: true,
                  message: '请输入密码'
                }
              ]}>        
              <Input placeholder="请输入密码" />
            </Form.Item>

            <Form.Item
              valuePropName="checked"
              name="agree"
              rules={[
                {
                  validator: function (rule, value) {
                    if (value === true) return Promise.resolve()
                    else {
                      return Promise.reject(new Error('请阅读并同意用户协议'))
                    }
                  }
                }
              ]}>
              <Checkbox>我已阅读并同意用户协议和 隐私条款</Checkbox>
            </Form.Item>

            <Form.Item>
              <Button
                type="primary"
                htmlType="submit"
                block
                loading={this.state.loading}>
                登录
              </Button>
            </Form.Item>
          </Form>
        </Card>
      </div>
    )
  }
}
